Setup Continuous Deployment for your React app using Bitbucket Pipelines and Google App Engine

Andrei Budoi

·

Follow

Published in

salt&pepper

·

3 min read

·

Aug 24, 2022

--

Listen

Share

Prerequisites

• Have your React app pushed to a Bitbucket repo. You’ll need admin access to configure pipelines and repository variables.
• You’ll also need a Google Cloud account.

Google Cloud Setup

Create or select a GCP project from the Cloud Resource Manager page. Later on, when setting up the pipeline, you will also require the project id.

Afterwards, enable the App Engine API and the Cloud Build API.

Go to App Engine and create an application. All you have to do is set up the location. The next step may be skipped.

Configuring the Service Accounts

In order to connect the pipeline to the GGP we’ll need to add a Service Account that will manage all the services needed to deploy to App Engine.

First off, go the Credentials page, click on Create Credentials and add a new Service account.

Give it a meaningful name, id and description. Make sure you have at least these four permissions:

• App Engine Admin
• App Engine Creator
• Storage Admin
• Cloud Build Editor

From the Credentials page, select the App Engine default service account. It should have an email like <project-id>@appspot.gserviceaccount.com. We need to grant access to the newly create Service Account and give it the Service Account User role.

Permissions Tab > Grant Access > Add the pipeline account email as principal > Add Service Account User Role

From the GCP Credentials page, select the Service account that we’re using for setting up the pipeline and add a JSON key, from the Keys tab. It will be later required to configure the pipelines.

Add App Engine config files

Create an app.yaml file in the root folder of your frontend codebase. You may need to change it depending on your build folder. Read more about it here.

We’ll also need a .gcloudignore file in the same place to skip uploading non-build related files to Google Cloud

/node_modules/
/src/

Your package.json file must include a section identifying the version of Node your project is using.

"engines": {
    "node": "16.15.0"
}

Configuring the Bitbucket Pipelines

Now it’s time to add the pipeline and link your repo to App Engine. Enable Bitbucket Pipelines and add the following yaml. This will ensures that every change pushed to the main branch will also be deployed on GCP. Feel free to change it to suit your needs.

The last step is to add a few variables to the repository so that the pipeline script can use them. You can manage them from the repository settings. The $PROJECT represents the project id found in the Cloud Resource Manager page.

For the $KEY_FILE variable we’ll need to use JSON key that we downloaded and encode in base64. You can do this from a terminal by running base64 <key-file-name>.json. Don’t forget to include the output as a Repository variable.

Add secret environment variables

App Engine allows adding ENV vars in your app only by listing them in app.yaml. The problem is that any secret token listed there would be pushed to the repo in plaintext and thus, not be secret anymore.

For that we need to update the pipeline to insert the secured repository variables stored in Bitbucket in app.yaml

Updated app.yaml

Updated bitbucket-pipelines.yml

That’s it! 🎉

You can push changes to your branch or trigger the pipeline manually. After it finishes, you can check your deployed app in the App Engine’s Services page.